<template>
    <div style="color: white;">
        <span>{{ formattedDate }} &nbsp;</span>
        <span>{{ formattedTime }} &nbsp;</span>
        <span>{{ dayOfWeek }} &nbsp;</span>
    </div>
</template>

<script>
export default {
    name: 'DateTimeWidget',
    data() {
        return {
            now: new Date(),
            intervalId: null,
        };
    },
    computed: {
        formattedDate() {
            const year = this.now.getFullYear();
            const month = String(this.now.getMonth() + 1).padStart(2, '0'); // 月份从0开始所以需要加1
            const day = String(this.now.getDate()).padStart(2, '0');
            return `${year}年${month}月${day}日`;
        },
        formattedTime() {
            return this.now.toLocaleTimeString();
        },
        dayOfWeek() {
            const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return days[this.now.getDay()];
        },
    },
    methods: {
        updateTime() {
            this.now = new Date();
        }
    },
    mounted() {
        // 每秒更新一次时间
        this.intervalId = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
        // 清除定时器以防止内存泄漏
        clearInterval(this.intervalId);
    }
};
</script>
<style scoped>
</style>